<template>
  <div>
    <p class="p-weight">喜欢这个歌单的人</p>
    <div class="collector">
      <img :title="item.nickname" v-for="item in subscribers" :key="item.userId" :src="item.avatarUrl" alt="" @click="screenUserPage(item)">
    </div>
  </div>
</template>

<script>
import {playlistSubscribers} from '@/api'
  export default {
    name:"Collector",
    data() {
      return {
        subscribers:[]
      }
    },
    created () {
      this.init()
    },
    methods: {
      init() {
        this.getPlaylistSubscribers()
      },
      getPlaylistSubscribers(){
        playlistSubscribers({
          id:this.$route.query.id,
          limit: 60
        }).then(data=>{
          console.log(data,"歌单收藏者");
          this.subscribers = data.subscribers
        })
      },
      screenUserPage(val){
        const {userId} = val;
        this.$router.push({
          name:"dynamic",
          query:{
            id:userId
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
.p-weight{
  font-size:12px;
  font-weight: 600;
  padding-bottom:4px;
  border-bottom:1px solid rgb(204,204,204);
}
.collector{
  display: flex;
  flex-wrap: wrap;
  img{
    cursor: pointer;
    width:42px;
    height:42px;
    margin:6px;
  }
  img:nth-of-type(1){
    margin-left:0;
  }
   img:nth-of-type(4n){
    margin-right:0;
  }img:nth-of-type(4n+1){
    margin-left:0;
  }
}
</style>